<template>
  <div class="app-container">
    <el-row :gutter="20">
      <el-col :span="9">
        <el-form :model="form" ref="formRef" label-width="80px">
          <el-row :gutter="20">
            <el-col :lg="24">
              <el-form-item label="箱ID">
                <el-input v-model="form.boxId" @input="boxIdChange"></el-input>
              </el-form-item>
            </el-col>
          </el-row>
          <el-row style="margin-top: 20px">
            <el-col :lg="24">
              <div style="width: 470px">
                <el-alert :type="retOpt" show-icon :closable="false" :title="titleName" :description="retMessage"></el-alert>
              </div>
            </el-col>
          </el-row>
        </el-form>
      </el-col>
      <el-col :span="15">
        <el-row style="margin-top: 20px">
          <el-button type="primary" :loading="loading" :disabled="onlineDisabled" @click="onlineSubmit">回传客户</el-button>
          <el-button type="primary" :loading="loading" :disabled="inDbDisabled" @click="submitForm">发料</el-button>
        </el-row>
        <el-row>
          <el-table v-loading="loading" :data="storeDataList" border max-height="620">
            <el-table-column prop="dnNo" label="出货单号" align="center" width="130px" v-if="columns.showColumn('dnNo')" />
            <el-table-column prop="mdlId" label="产品型号" align="center" v-if="columns.showColumn('mdlId')" />
            <el-table-column prop="prdSeqId" label="产品sn" align="center" v-if="columns.showColumn('prdSeqId')" />
            <el-table-column prop="evtTimestamp" label="出货时间" align="center" v-if="columns.showColumn('evtTimestamp')" />
          </el-table>
        </el-row>
      </el-col>
    </el-row>
  </div>
</template>
<script setup name="online">
import { list, add, online } from '@/api/storein/online'
import _ from 'lodash'
const { proxy } = getCurrentInstance()
const columns = ref([
  { visible: true, align: 'center', type: '', prop: 'mdlId', label: '产品型号' },
  { visible: true, align: 'center', type: '', prop: 'dnNo', label: '出货单号' },
  { visible: true, align: 'center', type: '', prop: 'prdSeqId', label: '产品sn' },
  { visible: true, align: 'center', type: '', prop: 'evtTimestamp', label: '出货时间' }
])
const formRef = ref()
const state = reactive({
  form: {},
  queryParams: {
    Boxid: undefined,
    reciveOronline: 1
  },
  storeDataList: [],
  inDbDisabled: true,
  onlineDisabled: true,
  titleName: '提示',
  retOpt: 'info', //info//success//error
  retMessage: '',
  loading: false
})

const { queryParams, form, storeDataList, inDbDisabled, onlineDisabled, retOpt, titleName, retMessage, loading } = toRefs(state)

var dictParams = []

proxy.getDicts(dictParams).then((response) => {
  response.data.forEach((element) => {
    state.options[element.dictType] = element.list
  })
})
/** boxid变更事件 */
const boxIdChange = _.debounce(() => {
  onlineDisabled.value = true
  inDbDisabled.value = true
  queryParams.value.Boxid = form.value.boxId
  queryParams.value.reciveOronline = 1
  if (form.value.boxId) {
    list(queryParams.value).then((res) => {
      storeDataList.value = res.data.data
      retMessage.value = res.data.message
      showButton(res.data)
    })
  }
}, 500)
function showButton(data) {
  if (data.state == 1) {
    retOpt.value = 'info'
    titleName.value = '提示'
  } else if (data.state == 0) {
    retOpt.value = 'success'
    titleName.value = '成功'
    retMessage.value = '箱ID：' + form.value.boxId + '已出货，已回传客户。'
  } else {
    retOpt.value = 'error'
    titleName.value = '错误'
  }
  if (data.passbackFlag == 0 || data.addbtn == 3) {
    onlineDisabled.value = true
    inDbDisabled.value = true
  } else {
    if (data.addbtn == 1) {
      inDbDisabled.value = false
      onlineDisabled.value = true
    } else {
      inDbDisabled.value = true
      onlineDisabled.value = false
    }
  }
}
function submitForm() {
  loading.value = true
  add({ ...form.value }).then((res) => {
    showButton(res.data)
    retMessage.value = res.data.message
    loading.value = false
  })
}
function onlineSubmit() {
  loading.value = true
  online({ ...form.value }).then((res) => {
    showButton(res.data)
    retMessage.value = res.data.message
    loading.value = false
  })
}
</script>
